<template>

    <UxDialog :visible="visible" fullScreen @close="close()">
        <div class="emb-txt-box">

            <div class="emb-txt-view">

                <div class="emb-txt-input" :class="{ active: font.text != cache.text || text_focus || !font.text }">
                    <input type="text" v-model="font.text" ref="input" @blur="text_focus = false"
                        @focus="text_focus = true" />
                </div>
                <DesignerEmbEditPreview v-model="color_active" :stitches="stitches" :colors="line_color"
                    :platen="platen" @dstClick="onDstClick($event)" ref="edit-preview" />

                <p v-if="loading">???</p>
                <p v-else>
                    <span>Size: {{ getIn(dst_width) }}″×{{ getIn(dst_height) }}″</span>
                    <span>Stitches: {{ stitches_count }}</span>
                </p>

                <div class="emb-txt-notify" @click="getFont()" v-show="change && font.text">
                    <img src="@/assets/images/designer/designer-dtg-refresh.png" alt="">
                    <span>Refresh preview</span>
                </div>

            </div>

            <div class="emb-txt-action">
                <div class="emb-txt-scroller">

                    <div class="emb-txt-family">
                        <h3>Font</h3>
                        <DesignerEmbTxtFamily v-model="font.family" :font-size.sync="font.size" />
                    </div>

                    <div class="emb-txt-size">
                        <h3>Size</h3>
                        <UxInputNumber unit="in" v-model="fontSize" :precision="2" :step="0.01" :min="fontRange.min"
                            :max="fontRange.max" />
                    </div>

                    <div class="emb-txt-size">

                        <div class="emb-txt-tab">
                            <span :class="{ active: font.tab == 'envelope' }" @click="handleTabClick('envelope')">
                                Warp
                            </span>
                            <span :class="{ active: font.tab == 'arc' }" @click="handleTabClick('arc')">
                                Arc
                            </span>
                        </div>
                        <div class="emb-txt-tab-notify" v-if="next_tab">
                            <strong>{{ next_tab == 'arc' ? 'Warp' : 'Arc' }}</strong>
                            <span>Two transformation types can't be used together. Switching will erase your current
                                settings.</span>
                            <cite>
                                <button @click="next_tab = ''">Cancel</button>
                                <button type="primary" @click="handleTabConfirm()">Confirm</button>
                            </cite>
                        </div>
                        <template v-else>
                            <DesignerEmbTxtEditEnvelope v-model="font.envelop" :font="font"
                                v-if="font.tab == 'envelope'" />

                            <DesignerEmbTxtEditArc :arc.sync="font.arc" :side.sync="font.side" :font="font"
                                v-if="font.tab == 'arc'" />
                        </template>
                    </div>

                    <div class="emb-txt-colors" ref="colorPopper">
                        <h3>Colors</h3>
                        <ul>
                            <li v-for="(color, index) in colorsFormat" :key="index"
                                :class="{ active: index == color_popper }">
                                <b @click="color_popper = color_popper == index ? -1 : index"></b>
                                <i v-text="index + 1"></i>
                                <em :style="{ backgroundColor: color.hex }"></em>
                                <span class="hover-tip" v-text="color.name"></span>
                                <svg-icon class="emb-txt-colors-remove" name="dialog-close-full"
                                    v-show="colorsFormat.length > 1" @click.native="delColor(index)" />
                                <svg-icon class="emb-txt-colors-arrow" name="tree-down" />

                                <cite>
                                    <span v-for="item in color_list" :key="item.code"
                                        :class="{ active: item.code == color.code }" @click="setColor(index, item)">
                                        <em :style="{ backgroundColor: item.hex }"></em>
                                        <svg-icon name="checkbox-active-shadow" />
                                        <p class="hover-tip" v-text="item.name"></p>
                                    </span>
                                </cite>
                            </li>
                            <li class="emb-txt-add" @click="addColor()" v-if="colorsFormat.length < 30"><svg-icon
                                    name="design-add" /></li>
                        </ul>
                    </div>

                    <div class="emb-txt-recently" v-if="recentlyText.length > 0">
                        <h3>Recently used</h3>
                        <ul>
                            <li v-for="(item, index) in recentlyText.slice(0, 3)"
                                :class="{ active: getReUsedActive(item, index) }" :key="index"
                                @click="setReplace(item, index)">
                                <EmbroideryPreview :stitches="getStitchesFormat(item.stitches)"
                                    :colors="getColorsFormat(item.line_color)" />
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="emb-txt-notify" v-if="isDisabled">
                    <svg-icon name="notify2" />
                    <span>Design exceeds embroidery frame. </span>
                </div>

                <div class="emb-txt-save" v-if="font.text && save_change">

                    <button type="primary" @click="doConfirm()" v-if="change">
                        <img src="@/assets/images/designer/designer-dtg-refresh-save.png" alt="">
                        <span>Refresh preview</span>
                    </button>

                    <button type="primary" @click="doConfirm()" v-else :class="{ disabled: isDisabled }">
                        <span>Save</span>
                    </button>
                </div>
            </div>

            <UxLoading2 :loading="loading" />
        </div>
    </UxDialog>

</template>

<script>
import { mapGetters } from "vuex";
import { colors, Pattern } from "@/utils/EmbroideryPattern.js";
import { getStitchesByBase64 } from "@/utils/EmbroideryDst.js";
import { Base64 } from "@/utils/DesignUtils.js";
import { emb_fonts } from "@/utils/emb-fonts.js";


export default {
    props: {
        recentlyText: { type: Array, default: () => [] },
    },
    data () {
        return {
            visible: false,
            stitches: '',
            stitches_count: 0,
            line_color: '',
            dst_name: '',
            dst_width: 0,
            dst_height: 0,
            font: { text: '', envelop: '', arc: 0, size: 0, family: '' },
            cache: {},
            save_change: false,
            init: {},
            notify: { envelope: true, arc: true },
            callback: null,
            platen: null,
            loading: false,
            color_list: colors,
            color_popper: -1,
            color_active: -1,
            text_focus: false,
            hight_light: null,
            active_used_index: -1,
            next_tab: ""
        };
    },

    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        ...mapGetters("designer", {
            platens: "getPlatens",
            pieces: "getPieces",
            activePiece: "getActivePiece",
            activeLayer: "getActiveLayer",
        }),

        colorsFormat () {
            return this.getColorsFormat(this.line_color)
        },

        change () {
            return Object.keys(this.font).find(key => this.font[key] != this.cache[key])
        },

        fontRange () {
            const active = emb_fonts.find(i => i.name == this.font.family)

            if (active) {
                return {
                    min: Math.round(100 * active.min * 0.0394) / 100,
                    max: Math.round(100 * active.max * 0.0394) / 100
                }

            } else {
                return { min: 0.2, max: 2 }
            }
        },
        // 是否不能选中
        isDisabled () {
            if (!this.platen) {
                return true;
            } else {
                // 比较最长边
                const size = {
                    width: this.platen.width * 254 / 300,
                    height: this.platen.height * 254 / 300,
                }
                const max = Math.max(size.width, size.height) > Math.max(this.dst_width, this.dst_height)
                const min = Math.min(size.width, size.height) > Math.min(this.dst_width, this.dst_height)
                return !(max && min)
            }
        },


        fontSize: {
            get () {
                // 1 磅等于1/72 英寸
                return (this.font.size / 254).toFixed(2);
            },
            set (val, old) {
                this.font.size = Math.round(parseFloat(val) * 254)
            }
        },

    },

    watch: {
        'change' () {
            this.save_change = true
        },
        'line_color' () {
            this.save_change = true
        },
        'visible' () {
            this.next_tab = ''
        }
    },
    methods: {
        handleTabConfirm () {
            // 初始化
            this.notify[this.next_tab] = false;
            this.font.arc = 0;
            this.font.envelop = '';
            // 赋值
            this.font.tab = this.next_tab;
            this.next_tab = '';
        },
        handleTabClick (target) {
            // 判断是否两个值都为空
            if (this.next_tab) return;
            const { arc, envelop } = this.font;
            if (!arc && !envelop) return this.font.tab = target;
            if (!this.notify[target]) {
                this.font.arc = 0;
                this.font.envelop = '';
                this.font.tab = target;
            } else {
                this.next_tab = target;
            }
        },
        getReUsedActive (item, index) {
            const mapping = {
                font_size: "size",
                font_family: "family",
                font_envelop: "envelop",
                font_arc: "arc",
            }
            const codes = item.line_color.split(',')
            const cur_color = this.getLoop(codes).join(',');
            if (cur_color != this.line_color) return false;
            return index == this.active_used_index && Object.keys(mapping).every(key => {
                return item[key] == this.font[mapping[key]]
            })
        },
        // 点击事件
        onDstClick ($event) {
            this.$refs.input.focus()
        },

        getIn (val) {
            return (val * 0.1 * 0.0394).toFixed(1)
        },


        // 改颜色
        setColor (index, color) {
            const val = this.colorsFormat.slice(0)
            val[index] = color
            this.line_color = val.map(i => i.code).join(',')
            this.color_popper = -1;
        },
        // 添加颜色
        addColor () {
            const val = this.colorsFormat.slice(0).map(i => i.code)
            const active = this.color_list[val.length % this.color_list.length]

            val.push(active.code)
            this.line_color = val.join(',')
            // this.color_popper = val.length - 1
        },
        // 删除颜色
        delColor (index) {
            const other = this.colorsFormat.filter((i, idx) => idx != index)
            this.line_color = other.map(i => i.code).join(',')

        },


        // 获取针迹
        getStitchesFormat (stitches) {
            return stitches ? getStitchesByBase64(stitches) : []
        },

        // 获取颜色
        getColorsFormat (line_color) {
            const codes = line_color.split(',').filter(i => i)
            return codes.map(i => colors.find(c => c.code == i)).filter(i => i)
        },

        // 获取循环的数组
        getLoop (codes) {
            let index = 0;
            const isLoop = (arr, count) => {
                if (count > arr.length) {
                    return false;
                } else {
                    const len = Math.ceil(arr.length / count)
                    const split = new Array(len).fill('0').map((k, i) => arr.slice(i * count, i * count + count))
                    const str = arr.slice(0, count).join('-')
                    const diff = split.filter(i => str.indexOf(i.join('-')) == 0)

                    return diff.length == split.length
                }
            }

            while (++index < codes.length) {
                if (isLoop(codes, index)) {
                    break;
                }
            }

            return codes.slice(0, index)
        },


        // 加载文字
        getFont (callback) {
            // this.loading = true;

            const option = {
                'Text': this.font.text,
                'Font': this.font.family,
                'Height': this.font.size,
                'IsRainbowText': 'True',
            }
            console.log("getFont", option);
            // option.Text.split('').map((s, i) => {
            //     const active = this.color_list[i % this.color_list.length]
            //     option[`RainbowColors[${i}].Code`] = active.code;
            //     option[`RainbowColors[${i}].Hex`] = active.hex;
            // })

            if (this.font.tab == 'arc' && this.font.arc != 0) {
                option.type == 'ltArc'
                // 半径
                const arc = this.font.arc * this.font.side;
                const r = Math.abs(arc)
                const k = Math.floor(Math.sin(Math.PI * 45 / 180) * r)
                const y2 = Math.floor(arc)

                option.X1 = -k;
                option.Y1 = arc > 0 ? -k : k;
                option.X2 = 0;
                option.Y2 = y2;
                option.X3 = k;
                option.Y3 = arc > 0 ? -k : k;;
            } else if (this.font.tab == 'envelope' && this.font.envelop) {
                option.Envelope = this.font.envelop
            }

            console.log(option);

            this.loading = true;
            this.$http('Drawer.createEmbroideryText', { base64: Base64.encode(JSON.stringify(option)) }).then(res => {
                console.log(res);

                if (res.code === 0 && res.data.stitches) {
                    const data = res.data || {}
                    const bounds = data.bounds || {}
                    this.stitches = res.data.stitches
                    this.dst_width = bounds.width
                    this.dst_height = bounds.height
                    this.stitches_count = data.stitches_count
                    this.cache = JSON.parse(JSON.stringify(this.font))
                    console.log("this.cache", this.cache);
                    this.$refs['edit-preview'] && this.$refs['edit-preview'].doScaleInit()

                    this.loading = false

                    callback && callback()

                } else {
                    this.loading = false;
                    this.$uxMessage.error("Failed to render text.");
                }
            })

        },

        // 替换内容
        setReplace (item, index) {
            // const { font_size: size, font_family: family, font_envelop: envelop, font_arc: arc, } = item;

            const codes = (item.line_color || '').split(',').filter(i => i)
            this.line_color = this.getLoop(codes).join(',');

            this.font.size = item.font_size
            this.font.family = item.font_family
            this.font.envelop = item.font_envelop
            this.font.arc = Math.abs(item.font_arc)
            this.font.tab = Math.abs(item.font_arc) > 0 ? 'arc' : 'envelope';
            this.font.side = item.font_arc > 0 ? 1 : -1;

            this.active_used_index = index
        },

        // 打开窗口
        openDialog (option) {

            // 获取颜色的循环
            const codes = (option.line_color || '').split(',').filter(i => i)

            this.visible = true;
            this.stitches = option.stitches || '';
            this.stitches_count = option.stitches_count || 0
            this.line_color = this.getLoop(codes).join(',');
            this.dst_name = option.dst_name || ''
            this.dst_width = option.dst_width || 0
            this.dst_height = option.dst_height || 0

            this.font = {
                text: option.font_text,
                size: option.font_size,
                family: option.font_family,
                envelop: option.font_envelop,
                arc: Math.abs(option.font_arc),
                tab: Math.abs(option.font_arc) > 0 ? 'arc' : 'envelope',
                side: option.font_arc > 0 ? 1 : -1,
            }

            this.cache = JSON.parse(JSON.stringify(this.font))
            this.platen = option.platen
            this.notify = {
                envelope: true,
                arc: true
            };
            setTimeout(() => this.save_change = false, 0);

            // 其他数据
            this.callback = option.callback
            this.loading = false;
            setTimeout(() => !this.font.text && this.$refs.input.focus(), 1);

        },

        // 确定
        doConfirm () {

            if (!this.font.text) {
                // 没有文字内容，不给保存
            } else if (this.change) {
                // this.getFont(() => !this.isDisabled && this.doConfirm())
                this.getFont(() => { })
            } else if (this.isDisabled) {
                // 不一样
            } else {
                const codes = (this.line_color || '').split(',').filter(i => i)
                const stitches = getStitchesByBase64(this.stitches)
                const len = stitches.filter(i => i[2] == 5).length + 1;
                const line_color = codes.length > 0 ? new Array(len).fill('').map((k, i) => codes[i % codes.length]) : []

                this.callback && this.callback({
                    stitches: this.stitches,
                    stitches_count: this.stitches_count,
                    line_color: line_color.join(','),
                    dst_name: this.dst_name,
                    dst_width: this.dst_width,
                    dst_height: this.dst_height,

                    font_text: this.font.text,
                    font_envelop: this.font.tab == 'envelope' ? this.font.envelop : '',
                    font_arc: this.font.tab == 'arc' ? Math.abs(this.font.arc) * this.font.side : 0,
                    font_size: this.font.size,
                    font_family: this.font.family,
                })
                this.visible = false;
            }
        },
        // 关闭弹窗
        close () {
            this.visible = false;
        },
        onClickOutside (event) {
            const outer = {
                B: true,
                CITE: true
            }
            if (!outer[event.target.tagName]) {
                this.color_popper = -1;
            }
        }
    },

    created () {
        this.$on("global:DESIGN_OPEN_EMB_TXT_EDIT_DIALOG", (option) => this.openDialog(option));
    },
    mounted () {
        document.addEventListener("click", this.onClickOutside);
    },
    beforeDestroy () {
        document.removeEventListener("click", this.onClickOutside);
    }
};
</script>

<style lang="scss" scoped>
.emb-txt-tab-notify {
    height: 172px;
    background: #faf7f0;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    border: 1px solid #efece1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 452px;


    &>strong {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 20px;
    }

    &>span {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        line-height: 20px;
        text-align: center;
        margin: 12px 50px 0;
    }

    cite {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 22px;

        button {
            width: 96px;
            height: 28px;
            border-radius: 6px;
            font-size: 14px;
            margin: 0 4px;

            &:not([type]) {
                background-color: #fff;

            }
        }
    }

}

.emb-txt-box {
    display: flex;
    height: 100vh;

    .emb-txt-view {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1240;
        position: relative;
        background: #fafafa;
        overflow: hidden;

        &>p {
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 20px;
            top: 20px;

            strong {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 16px;
                color: #292929;
                line-height: 22px;
                text-align: left;
                font-style: normal;
            }

            span {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #555555;
                line-height: 22px;
                text-align: left;
                font-style: normal;
            }
        }

        .emb-txt-notify {
            position: absolute;
            height: 80px;
            left: 80px;
            bottom: 68px;
            right: 80px;
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #087196;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ededed;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            cursor: pointer;
            z-index: 1;

            img {
                width: 20px;
                height: 20px;
                margin-right: 4px;
            }

            &:hover {
                background: #e6e6e6;
            }

        }

        .emb-txt-input {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            opacity: 0;
            left: 40px;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;

            input {
                font-size: 48px;
                text-align: center;
                border: none;
                height: 120px;
                background: rgba(234, 76, 137, 0.1);
                caret-color: #ea4c89;
                border-radius: 0;

                &:focus {
                    box-shadow: none;
                }
            }

            &.active {
                opacity: 1;
                pointer-events: all;

                &+.emb-edit-preview {
                    opacity: 0;
                    pointer-events: none;
                }
            }
        }
    }

    .emb-txt-action {
        flex: 680;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        border-left: 1px solid #e6e6e6;

        .emb-txt-scroller {
            flex: 1;
            padding: 0 102px 100px;
            overflow: auto;

            h3 {
                margin-top: 24px;
                margin-bottom: 10px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #292929;
                line-height: 20px;
                text-align: left;
                font-style: normal;
            }

            .emb-txt-tab {
                display: inline-flex;
                position: relative;
                margin-top: 24px;
                margin-bottom: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #292929;
                line-height: 20px;
                text-align: left;
                font-style: normal;

                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 1px;
                    background: #dcdcdc;
                    left: 0;
                    bottom: 0;
                    z-index: 0;
                }

                span {
                    height: 28px;
                    line-height: 16px;
                    border-bottom: 2px solid transparent;
                    cursor: pointer;
                    min-width: 52px;
                    text-align: center;
                    z-index: 1;

                    &.active {
                        border-bottom-color: #ea4c89;
                    }

                    &+span {
                        margin-left: 10px;
                    }
                }
            }
        }

        .emb-txt-notify {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 61px;
            height: 40px;
            background: #fef6f6;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #f7eeee;

            svg {
                width: 14px;
                height: 14px;
                color: #c62828;
                margin-right: 4px;
            }

            span {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #c62828;
                line-height: 20px;
            }

        }

        .emb-txt-save {
            border-top: 1px solid #ebebeb;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;

            button {
                width: 288px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 20px;
                    height: 20px;
                    margin-right: 4px;
                }
            }
        }

        .emb-txt-size {
            .input-number {
                width: 140px;
                height: 40px;

                &::v-deep input {
                    height: 40px;
                    border-radius: 8px;
                }

                &::v-deep em {
                    height: 40px;
                    line-height: 40px;
                }

                &::v-deep b {
                    bottom: 20px;
                }

                &::v-deep b:last-child {
                    bottom: 5px;
                }
            }
        }

        .emb-txt-colors {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;

            ul {
                display: flex;
                flex-wrap: wrap;
                margin: -4px -4px 0;

                li {
                    margin: 4px;
                    width: 72px;
                    height: 40px;
                    box-sizing: border-box;
                    background: #ffffff;
                    display: flex;
                    align-items: center;
                    position: relative;
                    border: 1px solid #e6e6e6;
                    border-radius: 8px;

                    &>b {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                    }

                    &>i {
                        min-width: 24px;
                        text-align: center;
                        font-family: Roboto, Roboto;
                        font-weight: 500;
                        font-size: 12px;
                        color: #757575;
                        line-height: 16px;
                        font-style: normal;
                    }

                    &>em {
                        width: 20px;
                        height: 20px;
                        box-sizing: border-box;
                        background: #fafafa;
                        border-radius: 2px;
                        border: 1px solid rgba(0, 0, 0, 0.2);
                    }

                    .hover-tip {
                        font-family: Roboto, Roboto;
                        font-weight: 400;
                        font-size: 14px;
                        color: #fff;
                        line-height: 16px;
                        font-style: normal;
                        position: absolute;
                        background-color: #212121;
                        border-radius: 4px;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 100%;
                        margin-bottom: 8px;
                        line-height: 32px;
                        padding: 0 12px;
                        display: none;
                        white-space: nowrap;

                        &::before {
                            content: '';
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            top: 100%;
                            width: 0;
                            height: 0;
                            border-top: 3px solid #212121;
                            border-left: 3px solid transparent;
                            border-right: 3px solid transparent;
                        }
                    }

                    &>.emb-txt-colors-remove {
                        position: absolute;
                        right: -4px;
                        top: -4px;
                        width: 14px;
                        height: 14px;
                        padding: 2px;
                        box-sizing: border-box;
                        border-radius: 14px;
                        background-color: #212121;
                        color: #fff;
                        display: none;
                        cursor: pointer;

                        &:hover {
                            background-color: #DE2F2F;
                        }
                    }

                    &>.emb-txt-colors-arrow {
                        width: 12px;
                        height: 12px;
                        box-sizing: border-box;
                        padding: 2px;
                        margin-left: 6px;
                        cursor: pointer;
                    }

                    &>cite {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 100%;
                        background: #ffffff;
                        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
                        border-radius: 8px;
                        display: flex;
                        flex-wrap: wrap;
                        padding: 5px;
                        min-width: 180px;
                        opacity: 0;
                        pointer-events: none;
                        z-index: 1;
                        margin-top: 6px;
                        box-sizing: border-box;

                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            right: 0;
                            border: 1px solid #ebebeb;
                            border-radius: 8px;
                        }

                        span {
                            width: 24px;
                            height: 24px;
                            margin: 5px;
                            background: #ffffff;
                            border-radius: 2px;
                            border: 1px solid rgba(0, 0, 0, 0.2);
                            box-sizing: border-box;
                            position: relative;
                            cursor: pointer;
                        }

                        em {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                        }

                        svg {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 12px;
                            height: 12px;
                            fill: #fff;
                            display: none;
                        }

                        span.active svg {
                            display: block;
                        }
                    }

                    &:not(.active):hover {
                        background-color: #f6f6f6;

                        &>.emb-txt-colors-remove {
                            display: block;
                        }

                        &>.hover-tip {
                            display: block;
                        }
                    }

                    &.active {
                        .emb-txt-colors-arrow {
                            transform: rotate(180deg);
                        }

                        cite {
                            opacity: 1;
                            pointer-events: all;

                            &>span:hover {
                                &>.hover-tip {
                                    display: block;
                                }
                            }
                        }
                    }

                    &.emb-txt-add {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;

                        svg {
                            display: block;
                            position: relative;
                            width: 12px;
                            height: 12px;
                            color: #000;
                            background: none;
                        }
                    }
                }
            }
        }

        .emb-txt-recently {
            ul {
                display: flex;
                margin: 0 -5px;
            }

            li {
                width: 120px;
                margin: 5px;
                border: 1px solid #e6e6e6;
                position: relative;
                border-radius: 8px;
                cursor: pointer;

                &::before {
                    content: '';
                    display: block;
                    padding-bottom: 100%;
                }

                &:hover {
                    border: 1px solid #E0E0E0;
                    box-shadow: 0 0 0 1px #E0E0E0;
                }

                &.active {
                    border-color: #F6B2CD;
                    box-shadow: 0 0 0 1px #F6B2CD;
                }

                .embroidery-preview {
                    position: absolute;
                    left: 2px;
                    right: 2px;
                    bottom: 2px;
                    top: 2px;
                    overflow: hidden;
                    width: auto;
                }
            }
        }
    }
}
</style>
